<template>
  <div class="container">
    <div class="showCont" v-if="!showTimeOut && showCont">
      <!-- <div class="bannerCont">
                <img class="bannerImg" src="/img/bookBanner.png" />
            </div> -->
      <div class="formCont">
        <div class="formTitle">
          <div>远程兼职接单</div>
          <div>
            <van-switch
              active-color="#86a9fb"
              v-model="stepOne"
              size="1.2rem"
            />
          </div>
        </div>
        <div class="formMain">
          <div class="formInput">
            <div class="inputName">
              <div class="inputName">
                <div class="inputNameText">每周接单时长</div>
              </div>
            </div>
            <div class="inputOut">
              <div class="inputMask" @click="orderHourseShow = true"></div>
              <input
                v-model="formInfo.orderHourse"
                placeholder="选择每周接单时长"
              />
            </div>
            <div
              @click="orderHourseShow = true"
              class="iconfont icon-xiala"
            ></div>
          </div>
          <div class="formInput">
            <div class="inputName">
              <div class="inputName">
                <div class="inputNameText">可工作时间</div>
              </div>
            </div>
            <div class="inputOut">
              <div class="inputMask" @click="workTimeShow = true"></div>
              <input
                v-model="formInfo.workTime"
                placeholder="选择可工作的时间"
              />
            </div>
            <div @click="workTimeShow = true" class="iconfont icon-xiala"></div>
          </div>
          <div class="formInput">
            <div class="inputName">
              <div class="inputNameText">兼职日薪</div>
            </div>
            <input
              class="inputText"
              type="digit"
              v-model="formInfo.money"
              maxlength="5"
              placeholder="请输入兼职日薪"
            />
            <div class="inputtag">元/天</div>
          </div>
        </div>
      </div>
      <div class="formCont">
        <div class="formTitle">
          <div>短期驻场接单</div>
          <div>
            <van-switch
              active-color="#86a9fb"
              v-model="stepTwo"
              size="1.2rem"
            />
          </div>
        </div>
        <div class="formMain">
          <div class="formInput">
            <div class="inputName">
              <div class="inputName">
                <div class="mustIcon">*</div>
                <div class="inputNameText">驻场城市</div>
              </div>
            </div>
            <div class="inputOut">
              <div class="inputMask" @click="userCityShow = true"></div>
              <input v-model="formInfo.userCity" placeholder="选择可驻场城市" />
            </div>
            <div @click="userCityShow = true" class="iconfont icon-xiala"></div>
          </div>
        </div>
      </div>
      <div class="saveBtn" @click="saveFn">保存接单设置</div>
    </div>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="orderHourseShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择每周接单时长</div>
        <van-picker
          title="标题"
          :show-toolbar="false"
          :columns="orderHourseArr"
          @change="orderHourseChange"
        />
        <div class="maskBtn" @click="orderHourseSure">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="workTimeShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">
          <div>可工作时间</div>
          <div class="maskHeadTip">最少选择一项时间</div>
        </div>
        <div class="workTimeCont">
          <div
            class="workTimeItem"
            :key="index"
            v-for="(item, index) in workTimeArr"
          >
            <div class="timeItemHead">
              <div
                @click="item.check = !item.check"
                :class="
                  item.check
                    ? 'timeCheck iconfont icon-gouxuan1 activeCheck'
                    : 'timeCheck iconfont icon-gouxuan1'
                "
              ></div>
              <div class="timeHeadName">{{ item.name }}</div>
            </div>
            <div class="checkItem">
              <div class="checkItemName">开始时间</div>
              <div
                class="checkItemVal"
                @click="checkWorkTimeFn(item, index, 0)"
              >
                <div class="checkTimeVal">{{ item.start_time }}</div>
                <div class="iconfont icon-xiala"></div>
              </div>
            </div>
            <div class="checkItem">
              <div class="checkItemName">结束时间</div>
              <div
                class="checkItemVal"
                @click="checkWorkTimeFn(item, index, 1)"
              >
                <div class="checkTimeVal">{{ item.end_time }}</div>
                <div class="iconfont icon-xiala"></div>
              </div>
            </div>
          </div>
        </div>
        <div
          :class="regWorkTimeFn() ? 'maskBtn' : 'maskBtn disMaskBtn'"
          @click="workTimeSureFn"
        >
          {{ regWorkTimeFn() ? "确认选择" : "请选择可工作时间" }}
        </div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="showCheckTime"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择开始工作时间</div>
        <van-time-picker
          v-model="currentTime"
          :show-toolbar="false"
          title="选择时间"
        />
        <div class="maskBtn" @click="sureCheckTime">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="userCityShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择驻场的城市</div>
        <van-area
          :columns-num="2"
          @change="userCityChange"
          confirm-button-text=""
          cancel-button-text=""
          :area-list="areaList"
        />
        <div class="maskBtn" @click="userCitySureFn">确认选择</div>
      </div>
    </van-popup>
    <subLoad v-if="showSub"></subLoad>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<script>
import { areaList } from "@vant/area-data";
import { showSuccessToast, showFailToast, showToast } from "vant";
import subLoad from "@/components/public/subLoad.vue";
import { orders_set_show, orders_set_save } from "@/http/api";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
export default {
  components: { subLoad, load, getTimeOut },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      showSub: false,
      //弹窗显示开关
      orderHourseShow: false,
      showCheckTime: false,
      workTimeShow: false,
      userCityShow: false,
      stepOne: false,
      stepTwo: false,
      // 弹窗数据
      _workTime: "",
      _checkTypeType: 0,
      // 表单对象
      formInfo: {
        orderHourse: "",
        workTime: "",
        money: "",
        userCity: "",
      },
      // 数组数据
      areaList: areaList,
      workTimeArr: [
        {
          name: "工作日",
          check: false,
          start_time: "09:00",
          end_time: "23:00",
        },
        { name: "周末", check: false, start_time: "09:00", end_time: "23:00" },
      ],
      orderHourseArr: [
        { text: "15小时以下", value: "15小时以下" },
        { text: "15-25小时", value: "15-25小时" },
        { text: "25-35小时", value: "25-35小时" },
        { text: "35-45小时", value: "35-45小时" },
        { text: "45小时以上", value: "45小时以上" },
      ], //每周时长数组
    };
  },
  props: {},
  setup() {},
  methods: {
    orderHourseChange(selectedValues, selectedOptions) {
      this.formInfo.orderHourse = selectedValues.selectedValues[0];
    },
    orderHourseSure() {
      if (this.formInfo.orderHourse == "") {
        this.formInfo.orderHourse = "15小时以下";
      }
      this.orderHourseShow = false;
    },
    // 选择工作时间范围
    checkWorkTimeFn(item, index, type) {
      if (type == 0) {
        this.currentTime = item.start_time.split(":");
      } else {
        this.currentTime = item.end_time.split(":");
      }
      this.checkTimeIndex = index;
      this.checkTimeType = type;
      this.showCheckTime = true;
    },
    sureCheckTime() {
      if (this.checkTimeType == 0) {
        this.workTimeArr[this.checkTimeIndex].start_time =
          this.currentTime.join(":");
      } else {
        this.workTimeArr[this.checkTimeIndex].end_time =
          this.currentTime.join(":");
      }
      this.showCheckTime = false;
    },
    //可工作时间确认
    workTimeSureFn() {
      let timeStrArr = [];
      let _timeStrArr = [];
      for (let i = 0; i < this.workTimeArr.length; i++) {
        if (this.workTimeArr[i].check) {
          _timeStrArr.push(this.workTimeArr[i]);
          timeStrArr.push(
            this.workTimeArr[i].name +
              "(" +
              this.workTimeArr[i].start_time +
              "~" +
              this.workTimeArr[i].end_time +
              ")"
          );
        }
      }
      if (timeStrArr.length == 0) {
        return false;
      }
      this._workTime = _timeStrArr;
      this.formInfo.workTime = timeStrArr.join(",");
      this.workTimeShow = false;
    },
    // 正则验证工作时间
    regWorkTimeFn() {
      if (this.workTimeArr[0].check || this.workTimeArr[1].check) {
        return true;
      } else {
        false;
      }
    },
    //选择城市
    userCityChange(selectedValues, selectedOptions) {
      if (selectedValues.selectedOptions.length > 0) {
        this.formInfo.userCity = selectedValues.selectedOptions[1].text;
      }
    },
    userCitySureFn() {
      if (this.formInfo.userCity == "") {
        this.formInfo.userCity = "北京市";
      }
      this.userCityShow = false;
    },
    saveFn() {
      console.log(this.formInfo);
      console.log(this._workTime);
      let data = {
        is_ycjzjd: this.stepOne ? 2 : 1,
        ycjzjd_content: {
          mzjdsc: this.formInfo.orderHourse,
          jzrx: this.formInfo.money,
          kgzsj: this._workTime,
        },
        is_dqzcjd: this.stepTwo ? 2 : 1,
        dqzcjd_content: {
          zccs: this.formInfo.userCity,
        },
      };
      this.showSub = true;
      orders_set_save(data).then((res) => {
        if (res.data.code == 1) {
          showSuccessToast("设置成功");
        } else {
          showToast(res.data.msg);
        }
        this.showSub = false;
      });
    },
    getData() {
      orders_set_show()
        .then((res) => {
          if (res.data.code == 1) {
            console.log(res.data.data);
            if (res.data.data) {
              let resData = res.data.data;
              this.stepOne = resData.is_ycjzjd == 1 ? false : true;
              this.stepTwo = resData.is_dqzcjd == 1 ? false : true;
              let workTime = [];
              let timeStrArr = [];
              if (
                resData.ycjzjd_content.kgzsj &&
                resData.ycjzjd_content.kgzsj.length > 0
              ) {
                for (let timeItem of resData.ycjzjd_content.kgzsj) {
                  timeItem["check"] = true;
                  workTime.push(timeItem);
                  timeStrArr.push(
                    timeItem.name +
                      "(" +
                      timeItem.start_time +
                      "~" +
                      timeItem.end_time +
                      ")"
                  );
                }
              }
              this._workTime = workTime;
              if (workTime.length == 1) {
                for (let i = 0; i < this.workTimeArr.length; i++) {
                  if (this.workTimeArr[i].name === workTime[0].name) {
                    this.workTimeArr[i] = workTime[0];
                  }
                }
              } else if (workTime.length == 2) {
                this.workTimeArr = workTime;
              }
              this.formInfo = {
                orderHourse: resData.ycjzjd_content.mzjdsc,
                workTime: timeStrArr.join(","),
                money: resData.ycjzjd_content.jzrx,
                userCity: resData.dqzcjd_content.zccs,
              };
            }
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
  },
  mounted() {},
  created() {
    this.getData();
    // this.showTimeOut = true;
    // this.showCont = true;
  },
};
</script>
<style scoped lang="less">
.container {
  min-height: 100vh;
  background-color: #e7eeff;
  .showCont {
    padding-bottom: 2.5rem;
    box-sizing: border-box;
    padding-top: 1.25rem;
  }
  .bannerCont {
    width: 100%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .bannerImg {
      width: 100%;
    }
  }
  .formCont {
    background-color: #fff;
    width: 92%;
    margin: 0 auto;
    position: relative;
    // top: -1rem;
    // margin-top: -6rem;
    padding: 1rem 4%;
    border-radius: 0.75rem;
    box-sizing: border-box;
    margin-bottom: 1rem;
    .formTitle {
      font-size: 0.7rem;
      font-weight: bold;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .formInput {
      display: flex;
      padding: 0.75rem 1rem;
      box-sizing: border-box;
      align-items: center;
      width: 100%;
      background-color: #e7eeff;
      margin-bottom: 1rem;
      border-radius: 1.5rem;
      .inputName {
        width: 5rem;
        position: relative;
        .mustIcon {
          font-size: 0.7rem;
          top: 0rem;
          left: -0.4rem;
          position: absolute;
          color: #ff5757;
        }
      }
      .inputText {
        flex: 1;
        width: 3rem;
        border: none;
        background: none;
        outline: none;
      }
      .icon-xiala {
        width: 1.5rem;
        font-size: 0.8rem;
        color: #ccc;
        text-align: center;
      }
      .inputOut {
        flex: 1;
        width: 3rem;
        position: relative;
        .inputMask {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
        input {
          width: 90%;
          border: none;
          background: none;
          outline: none;
        }
      }
      .icon-xiala {
        width: 1.5rem;
        font-size: 0.8rem;
        color: #ccc;
        text-align: center;
      }
    }
  }
  .saveBtn {
    position: fixed;
    padding: 0.75rem 0;
    background-color: #86a9fb;
    color: #fff;
    text-align: center;
    border-radius: 2rem;
    width: 92%;
    left: 4%;
    bottom: 0.75rem;
  }
  .maskCont {
    padding: 1.5rem 4%;
    box-sizing: border-box;
    .maskForm {
      width: 100%;
      .formTitle {
        font-size: 0.7rem;
        font-weight: bold;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        position: relative;
        .mustIcon {
          color: #ff5757;
          margin-right: 0.25rem;
        }
      }
      .upProduct {
        margin-bottom: 1.25rem;
      }
      .formInput {
        display: flex;
        padding: 0.75rem 1rem;
        box-sizing: border-box;
        align-items: center;
        width: 100%;
        background-color: #e7eeff;
        margin-bottom: 1rem;
        border-radius: 1.5rem;
        .inputName {
          width: 4rem;
          position: relative;
          .mustIcon {
            font-size: 0.7rem;
            top: 0rem;
            left: -0.4rem;
            position: absolute;
            color: #ff5757;
          }
        }
        .resultTag {
          color: #5cc78e;
          font-size: 1rem;
        }
        .icon-xiala {
          width: 1.5rem;
          font-size: 0.8rem;
          color: #ccc;
          text-align: center;
        }
        .inputOut {
          flex: 1;
          width: 3rem;
          position: relative;
          .inputMask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
          input {
            width: 90%;
            border: none;
            background: none;
            outline: none;
          }
        }
        .inputText {
          flex: 1;
          width: 3rem;
          border: none;
          background: none;
          outline: none;
        }
      }
    }
    .maskHead {
      width: 100%;
      text-align: center;
      font-size: 1rem;
      font-weight: bold;
      margin-bottom: 1.5rem;
      .maskHeadTip {
        font-size: 0.6rem;
        font-weight: normal;
        color: #999;
        text-align: center;
      }
      .redTip {
        color: #ff5757;
      }
    }
    .workTimeCont {
      .workTimeItem {
        width: 100%;
        padding: 0.75rem;
        box-sizing: border-box;
        background-color: #e7eeff;
        border-radius: 0.25rem;
        margin-bottom: 0.75rem;
        .timeItemHead {
          display: flex;
          align-items: center;
          margin-bottom: 0.75rem;
          .timeCheck {
            width: 1rem;
            height: 1rem;
            border: 1px solid #86a9fb;
            background-color: #fff;
            font-size: 1rem;
            border-radius: 0.25rem;
            text-align: center;
            line-height: 1rem;
            margin-right: 0.5rem;
            color: #fff;
          }
          .activeCheck {
            background-color: #86a9fb;
          }
          .timeHeadName {
            font-size: 0.8rem;
            font-weight: bold;
          }
        }
        .checkItem {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #333;
          margin-bottom: 0.5rem;
          .checkItemVal {
            display: flex;
            align-items: center;
            .iconfont {
              margin-left: 0.25rem;
              font-size: 0.8rem;
              color: #999;
            }
          }
        }
      }
    }
    .maskCheck {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .maskCheckItem {
        width: 30%;
        text-align: center;
        background-color: #e7eeff;
        padding: 0.55rem 0;
        margin-bottom: 0.75rem;
        border-radius: 0.25rem;
        border: 1px solid #86a9fb;
        box-sizing: border-box;
        color: #86a9fb;
      }
      .maskCheckItemActive {
        background-color: #86a9fb;
        color: #fff;
      }
    }
    .sildNum {
      margin: 0.25rem auto 2rem;
      font-size: 1rem;
      text-align: center;
      span {
        color: #86a9fb;
      }
    }
    .smallText {
      font-size: 0.8rem;
    }
    .sliderCont {
      width: 80%;
      margin: 0 auto;
    }
    .maskCtrl {
      display: flex;
      justify-content: space-between;
      .maskBtn {
        width: 48%;
      }
      .whiteMaskBtn {
        background-color: #fff;
        color: #86a9fb;
      }
    }
    .maskBtn {
      width: 100%;
      text-align: center;
      padding: 0.6rem 0;
      background-color: #86a9fb;
      border: 1px solid #86a9fb;
      color: #fff;
      border-radius: 2rem;
      margin-top: 1.5rem;
    }
    .disMaskBtn {
      opacity: 0.5;
    }
  }
}
</style>
